import { useNavigation } from '@react-navigation/core'
import React,{ useState } from 'react'
import { StyleSheet, Text, TextInput, View, TouchableOpacity } from 'react-native'
import Header from './../components/Header'
import { Toast, Provider } from '@ant-design/react-native';
import { inject, observer } from 'mobx-react';
import store from '../../store';
interface Props {
  store?:any
}

const Login = (props: Props) => {
  const navigate = useNavigation()
  const [userName, setUserName] = useState('')
  const [passWord, setPassWord] = useState('')
  const toRegister = () => {
    navigate.navigate('/register')
  }
  const doLogin = () => {
    if (userName===''|| passWord==='') {
      Toast.info("用户名或密码不能为空",2)
    } else {
      const url = 'http://121.89.205.189/api/user/login'
      let resCode:any ;
      let testRequest = new Request(url , {
          method: 'POST',
          headers:{
            'Content-Type':'application/json',
            Accept:'application/json'
          },
          body: JSON.stringify({loginname: userName,password:passWord})
      })
      fetch(testRequest).then(res=> res.json()).then(res => {
        resCode = res
      })
      Toast.loading("登录中",2,()=>{
        if( resCode.code !== "200") {
          Toast.info(resCode.message,1)
        } else {
          let {token,userid} = resCode.data
          props.store.app.changeLogin({token,userid});
          props.store.app.changeIsEnable();
          navigate.navigate('/')
        }
      })
    }
  }
  return (
    <Provider>
      <View style={styles.container}>
        <View>
          <Header title="登录" />
        </View>
        <View style={styles.content}>
          <Text style={styles.titleText}>登录</Text>
          <View style={styles.loginBox}>
            <View>
              <TextInput 
                onChangeText={text => setUserName(text) } 
                placeholder="请输入用户名" 
                style={styles.inputBox}
              />
            </View>
            <View>
              <TextInput
                onChangeText={text => setPassWord(text) } 
                placeholder="请输入密码" 
                style={styles.inputBox}
              />
            </View>
            <View style={styles.buttomBox}>
              <TouchableOpacity onPress={ toRegister } style={[styles.btnTextBox,{marginRight:5,backgroundColor:'#00caee'}]}>
                <View><Text style={styles.buttom}>注册</Text></View>
              </TouchableOpacity>
              <TouchableOpacity onPress={ doLogin } style={[styles.btnTextBox,{marginLeft:5,backgroundColor:'#00a5b4'}]}>
                <View><Text style={styles.buttom}>登录</Text></View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    </Provider>
    
  )
}

export default inject("store")(observer(Login))

const styles = StyleSheet.create({
  container:{
    display: 'flex',
    flex: 1
  },
  titleText:{
    fontSize:40,
    color: "#000000",
    fontWeight:'bold',
  },
  content:{
    display: 'flex',
    width: '100%',
    flex:9,
    // backgroundColor:'#f43',
    alignItems:'center',
    justifyContent:'center',
  },
  loginBox:{
    padding:20,
    backgroundColor:'#d8d8d8',
    borderRadius:15
  },
  inputBox:{
    width: 300,
    height: 50,
    backgroundColor:'#fff',
    margin: 10,
    paddingStart:20,
    borderRadius:25
  },
  buttomBox:{
    display: 'flex',
    flexDirection:'row',
    margin: 10,
    height: 50,
    alignItems:'center',
    justifyContent:'center',
  },
  btnTextBox:{
    flex: 1,
    display: 'flex',
    justifyContent:'center',
    alignItems:'center',
    height: 50,
    borderRadius:25,
  },
  buttom:{
    color: "#fff",
    fontSize:20,
    fontWeight:'bold'
  }
})
